<template>
  <div class="banner">
    <div class="slider-box">
      <ul>
        <li
          v-for="(item, index) in items"
          :key="index"
          :class="{ active: index === activeIndex }"
        >
          <img :src="item.src" :alt="item.alt" />
        </li>
      </ul>
    </div>
    <div class="banner-recommend">
      <div class="banner-recommend-box">
        <figure>
          <a href="/article/643cfbefccc5fb60e759faad">
            <img src="/image/01.jpg" alt="" />
          </a>
          <figcaption>
            <span>置顶</span>
            <span>标题</span>
          </figcaption>
        </figure>
        <figure>
          <a href="/article/643d1352745f82766d0e8981">
            <img src="/image/08.jpg" alt="" />
          </a>
          <figcaption>
            <span>置顶</span>
            <span>标题</span>
          </figcaption>
        </figure>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "banner",
  data() {
    return {
      activeIndex: 0,
      items: [
        { src: "/image/01.jpg", alt: "Image 1" },
        { src: "/image/08.jpg", alt: "Image 2" },
        { src: "/image/09.jpg", alt: "Image 3" },
      ],
    };
  },
  mounted() {
    setInterval(() => {
      this.activeIndex = (this.activeIndex + 1) % this.items.length;
    }, 3000);
  },
};
</script>

<style scoped lang="scss">
.banner {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  .slider-box {
    flex: 1;
    height: 320px;
    position: relative;
    margin-right: 10px;
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 320px;
      overflow: hidden;
      li {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1s ease-in-out;
        border-radius: 8px;
        overflow: hidden;
        &.active {
          opacity: 1;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  .banner-recommend {
    width: 280px;
    .banner-recommend-box {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      figure {
        position: relative;
        width: 100%;
        height: 155px;
        // margin-top:12
        margin-bottom: 10px;
        overflow: hidden;
        a {
          width: 100%;
          height:100%;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        figcaption {
          
          position: absolute;
          left: 5px;
          bottom: 8px;
          color:#fff;
        }
      }
    }
  }
}
@media screen and (max-width: 650px) {
  .banner {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap !important;
    .slider-box {
      width: 100%;
      flex: auto;
      height: 240px;
      position: relative;
      margin-right: 0;

      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        li {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          transition: opacity 1s ease-in-out;
          border-radius: 8px;
          overflow: hidden;
          &.active {
            opacity: 1;
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
    .banner-recommend {
      width: 100%;
      .banner-recommend-box {
        width: 100%;
        height: 160px;
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;

        figure {
          overflow: hidden;
          height: 100%;
          margin: 5px 2px;
          box-sizing:border-box;
          flex:1;
          a {
            width: 100%;
            height:100%;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
